<template>
	<view class="update-contanier">
		<!-- 表单组件 -->
		<view class="form-wrapper">
			<u--form :model="form" ref="uForm" label-width="140rpx" :rules="rules">
				<u-form-item label="姓名:" prop="name">
					<u-input v-model="form.name" placeholder="请输入收货人姓名" border="none" />
				</u-form-item>
				<u-form-item label="电话:" prop="phone">
					<u-input v-model="form.phone" placeholder="请输入收货人手机号" border="none" />
				</u-form-item>
				<u-form-item label="收货地址:" prop="addressName">
					<view class="region flex-sb">
						<text v-if="!form.addressName.length" @click="getAddres">点击获取地址</text>
						<text v-else>{{form.addressName}}</text>
						<u-icon name="map" size="20" color="#01ab63" @click="getAddres"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="门牌号:" prop="detail" :border-bottom="false" style="align-items: flex-start;">
					<u--textarea v-model="form.detail" autoHeight placeholder="街道门牌、楼层等信息" border="none"></u--textarea>
				</u-form-item>
			</u--form>
			<view class="default-addres flex-sb">
				<text style="font-size: 28rpx;">设置为默认地址</text>
				<switch name="default-addres" style="transform: scale(0.6);" :checked="form.isDefault"
					@change="handleDefault()"></switch>
			</view>
		</view>
		<!-- 操作按钮 -->
		<view class="footer-btn">
			<view class="btn-wrapper">
				<view class="btn-item" :class="{ disabled }" @click="handleSubmit()">保存</view>
			</view>
		</view>
		<!-- 地区选择 -->
		<u-picker :show="region.show" ref="uPicker" keyName="name" :columns="region.data" @confirm="regionConfirm"
			@change="regionHandler" @close="region.show=false"></u-picker>
		<!-- 地区选择 -->
	</view>
</template>

<script>
	import * as Addres from "@/api/addres/index.js"
	// 表单验证规则
	const rules = {
		name: [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}],
		phone: [{
			required: true,
			message: '请输入手机号',
			trigger: ['blur', 'change']
		}, {
			// 自定义验证函数
			validator: (rule, value, callback) => {
				// 返回true表示校验通过，返回false表示不通过
				return uni.$unt.isMobile(value)
			},
			message: '手机号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['blur'],
		}],
		addressName: [{
			required: true,
			message: '请选择省市区',
			trigger: ['blur', 'change'],
		}],
		detail: [{
			required: true,
			message: '请输入详细地址',
			trigger: ['blur', 'change']
		}]
	}

	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
					addressName: '',
					detail: '',
					isDefault: false,
					region:{},
					regionId:''
				},
				rules,
				// 按钮禁用
				disabled: false,
				region: {
					show: false,
					data: []
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.getData(options.id)
			}
		},
		methods: {
			regionConfirm(e) {
				const value=e.value.map(item => item.name);
				this.form.addressName=value.join('/');
				this.form.region=e.value[e.value.length-1];
				this.form.regionId=e.value[e.value.length-1].id;
				this.region.show = false;
			},
			regionHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				console.log(e)
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.region.data[0][index].children)
					picker.setColumnValues(2, this.region.data[0][index].children[0].children)
				}else if(columnIndex === 1){
					picker.setColumnValues(2, this.region.data[0][indexs[0]].children[indexs[1]].children)
				}
			},
			getData(id) {
				Addres.deta({
					id: id
				}).then(res => {
					this.form = res.data;
				})
			},
			handleSubmit() {
				this.$refs.uForm.validate().then(res => {
					Addres.add(this.form).then(res => {
						this.$unts.toast(res.message)
						uni.navigateBack()
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			},
			// 获取用户地址
			async getAddres() {
				await this.getRegionData();
				this.region.show = true;
			},
			getRegionData() {
				const app = this;
				return new Promise(function(resolve, reject) {
					Addres.region().then(res => {
						app.region.data[0] = res.data;
						app.region.data[1] = res.data[0].children;
						app.region.data[2] = res.data[0].children[0].children;
						resolve(res.data);
					}).catch(err => reject(err))
				});
			},
			handleDefault() {
				this.form.isDefault = !this.form.isDefault;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.update-contanier {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.form-wrapper {
			margin: 20rpx auto 20rpx auto;
			padding: 0 30rpx;
			width: 100%;
			// box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			background: #fff;
		}

		.default-addres {
			margin-top: 20rpx;
		}

		/* 底部操作栏 */

		.footer-btn {
			width: 100%;
			margin-top: 60rpx;

			.btn-wrapper {
				width: 100%;
				padding: 10rpx 50rpx;

				.btn-item {
					background: linear-gradient(to right, #01ab63, #09BF09);
					text-align: center;
					color: #fff;
					padding: 20rpx 30rpx;
					border-radius: 200rpx;
				}
			}
		}

		// 
	}
</style>